<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card flip</title>
    <style>
        .main {
            display: flex;
            flex-flow: row wrap;
        }

        .item {
            margin: 20px 10px;
            width: 200px;

            background-color: white;
            border-radius: 10px;
            border: white solid 2px;
            box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.6)
        }

        .item:hover {
            border: #4CAF50 solid 2px;
            box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 8)
        }

        .item > div {
            margin: 20px 20px;
        }

        .item-header > img {
            width: 80px;
            height: 80px;
            border-radius: 30px;
        }

        .item-body > div {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .div-address {
            position: relative;
        }

        .item-body-address {
            width: 120px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .div-address:hover > .bubble {
            display: block;
        }

        .bubble {
            display: none;
            background-color: #000000;
            color: white;
            text-align: center;

            width: 160px;
            height: 100px;
            border: #000000 solid 2px;
            border-radius: 12px;

            position: absolute;
            top: -110px;
            right: 0;

        }

        .bubble-bg-border {
            width: 0;
            height: 0;
            border: solid 20px;
            border-color: #000000 transparent transparent transparent;

            position: absolute;
            left: 85px;
            top: 100px
        }

        .item:hover {
            /*transform: rotateY(45deg);*/
            /*transition: all 1s linear;*/
            animation: flip 1.5s linear;
        }

        @keyframes flip {
            /*25% {*/
            /*    transform: rotateY(-45deg);*/
            /*}*/
            50% {
                transform: rotateY(-90deg);
            }
            /*75% {*/
            /*    transform: rotateY(45deg);*/
            /*}*/
            100% {
                transform: rotateY(90deg);
            }
        }

        .disable-img1 {
            display: none;
        }

        #img-wrapper {
            perspective: 1200px;
            position: relative;
            height: 600px;
        }

        #img1,
        #img2 {
            width: 400px;
            height: 600px;
            position: absolute;
            transition: all 1s linear;
            backface-visibility: hidden;
        }

        #img1 {
            transform: rotateY(-180deg);
        }

        #img-wrapper:hover #img1 {
            transform: rotateY(-360deg);
        }

        #img-wrapper:hover #img2 {
            transform: rotateY(-180deg);
        }

    </style>
</head>
<body style="display: flex; flex-direction: row; justify-content: center; align-items: center">

<div class="main">
    <div class="item">
        <div class="item-header">
            <img src="static/img/user.png"/>
            <strong>Username</strong>
        </div>
        <div class="item-body">
            <div>
                <p>性别</p>
                <p>男</p>
            </div>
            <div>
                <p>年龄</p>
                <p>18</p>
            </div>
            <div class="div-address">
                <p>地址</p>
                <p class="item-body-address">
                    湖南湘西土家族苗族自治州
                </p>
                <div class="bubble">
                    <span>湖南湘西土家族苗族自治州龙山县春景村。</span>
                    <div class="bubble-bg-border"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="width: 200px"></div>
<br>
<br>
<br>
<br>
<br>
<div id="img-wrapper">
    <img src='static/img/a1.jpg' id='img1'/>
    <img src='static/img/a2.jpg' id='img2'/>
</div>



</body>
</html>
